import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet, Image } from 'react-native';
import { useRouter, useLocalSearchParams } from 'expo-router';
import { dataAPI } from '../api/apiService';

interface ItemDetail {
  id: string;
  title: string;
  description: string;
  content: string;
  image?: string;
  createdAt: string;
  updatedAt: string;
}

export default function DetailsScreen() {
  const router = useRouter();
  const params = useLocalSearchParams();
  const itemId = params.id as string || '1'; // 默认ID，实际应用中应该从路由参数中获取
  
  const [item, setItem] = useState<ItemDetail | null>(null);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    const fetchItemDetail = async () => {
      try {
        setLoading(true);
        const response = await dataAPI.getItemById(itemId);
        setItem(response);
      } catch (error) {
        console.error('Failed to fetch item details:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchItemDetail();
  }, [itemId]);

  const handleGoBack = () => {
    router.back();
  };

  if (loading) {
    return (
      <View style={styles.container}>
        <Text>加载中...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Button title="返回" onPress={handleGoBack} color="#95a5a6" />
      </View>
      
      {item ? (
        <View>
          {item.image && (
            <Image 
              source={{ uri: item.image }} 
              style={styles.itemImage} 
              resizeMode="cover"
            />
          )}
          
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.date}>
            创建时间: {new Date(item.createdAt).toLocaleString()}
          </Text>
          <Text style={styles.date}>
            更新时间: {new Date(item.updatedAt).toLocaleString()}
          </Text>
          
          <View style={styles.contentContainer}>
            <Text style={styles.sectionTitle}>描述</Text>
            <Text style={styles.description}>{item.description}</Text>
            
            <Text style={styles.sectionTitle}>详细内容</Text>
            <Text style={styles.content}>{item.content}</Text>
          </View>
          
          <View style={styles.actions}>
            <Button title="编辑" color="#3498db" />
            <Button title="分享" color="#2ecc71" />
          </View>
        </View>
      ) : (
        <Text style={styles.errorText}>未找到相关内容</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    padding: 10,
    backgroundColor: '#fff',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    elevation: 2,
  },
  itemImage: {
    width: '100%',
    height: 200,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    padding: 20,
    color: '#333',
    backgroundColor: '#fff',
  },
  date: {
    fontSize: 14,
    color: '#666',
    paddingHorizontal: 20,
    paddingBottom: 10,
    backgroundColor: '#fff',
  },
  contentContainer: {
    backgroundColor: '#fff',
    marginTop: 10,
    padding: 20,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 10,
    color: '#333',
  },
  description: {
    fontSize: 16,
    lineHeight: 24,
    color: '#333',
    marginBottom: 20,
  },
  content: {
    fontSize: 16,
    lineHeight: 24,
    color: '#333',
  },
  actions: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: 20,
    padding: 20,
    backgroundColor: '#fff',
  },
  errorText: {
    fontSize: 16,
    color: '#e74c3c',
    textAlign: 'center',
    marginTop: 20,
  },
});